<template>
  <el-aside :width="isCollapse ? '64px' : '200px'" height="100%">
    <el-menu
      :default-active="Id"
      text-color="#000"
      active-text-color="#ff0000"
      v-for="item in menulist"
      :key="item.key"
      padding:0
      :collapse="isCollapse"
    >
      <!-- 小分组 -->
      <el-submenu :index="item.key" v-if="item.children">
        <template slot="title">
          <i :class="item.icon"></i> &nbsp;&nbsp;
          <span slot="title">{{ item.title }}</span>
        </template>

        <el-menu-item
          v-for="itee in item.children"
          :key="itee.index"
          :index="itee.key"
          @click="handleNav(itee.key, itee.id)"
        >
          <template slot="title">
            <i :class="itee.icon"></i> &nbsp;&nbsp;
            <span slot="title">{{ itee.title }}</span>
          </template>
        </el-menu-item>
        <!-- <el-submenu
          v-for="(itee, index) in item.children"
          :key="index"
          :index="itee.id"
          
        >
          <template slot="title">
            <i :class="itee.icon"></i>
            <span  @click="handleNav(itee._key , itee.id)">{{ itee.title }}</span>
          </template>
        </el-submenu> -->
      </el-submenu>
      <!-- 首页 -->
      <el-menu-item
        :index="item.id"
        v-else
        @click="handleNav(item.key, item.id)"
      >
        <i :class="item.icon"></i>
        <span slot="title">{{ item.title }}</span>
      </el-menu-item>
    </el-menu>
  </el-aside>
</template>

<script>
// import menuConfig from "../../config/menuConfig.json";
import { getLeftMenuByRole } from "../../../api/adminApi";
export default {
  props: ["isCollapse"],
  data() {
    return {
      menulist: null,
      Id: undefined,
    };
  },
  created() {
    this.getLeftMenu();
    this.Id = window.sessionStorage.getItem("id");
    console.log(this.Id);
  },
  
  methods: {
    //获取登录用户的权限
    getLeftMenu() {
      let roleid = JSON.parse(window.sessionStorage.getItem("user")).roleid;
      console.log(roleid);
      let roleIdArr = [];
      if (roleid) {
        roleIdArr = roleid.split(",");
      }
      getLeftMenuByRole({ roleIdArr }).then((res) => {
        console.log(res);
        if (res.status == 1) {
          this.menulist = res.data;
        }
      });
    },
    handleNav(lujing, id) {
      window.sessionStorage.setItem("id", id);
      this.Id = id;
      this.Id = String(this.Id)
      this.$router.push(lujing);
    },
  },
};
</script>

<style lang="less" scoped>
.el-menu-vertical-demo {
  height: 100%;
}
.el-aside {
  transition: all 1s ease 0s;
}

span {
  margin-left: 10px;
}
.iconfont {
  font-size: 25px;
}
</style>